<template>
    <div class="sys-page">
        <div class="sys-search">

            <el-form :model="searchForm" :label-position="$store.labelPosition" label-width="20%">
                <el-col :xs="23" :sm="14">
                    <el-form-item label="角色名称：" >
                        <el-input v-model="searchForm.roleName" placeholder="请输入角色名称"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="searchRolesByCriteria()">查询</el-button>
                        <el-button type="edit" icon="el-icon-plus" @click="gotoAddRole()">添加</el-button>
                        <!--<el-button type="danger" icon="el-icon-delete" @click="deleteRoles()">删除</el-button>
-->
                    </el-form-item>
                </el-col>
            </el-form>

            <table-mixin pagination paginationAlign="left" :paginationTotal="paginationTotal"
                         :pageChange="pageChange" :currentPage="currentPage">
                <el-table v-loading="tableData.loading" :data="tableData.body" stripe border style="width:100%">
                    <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>

                    <el-table-column label="角色名称" prop="roleName" min-width="25%"></el-table-column>
                    <el-table-column label="描述" prop="remark" min-width="35%"></el-table-column>

                    <el-table-column label="操作" class-name="centerCell" min-width="30%">
                        <template slot-scope="scope">
                            <el-button type="edit" size="small" icon="el-icon-edit"
                                       @click="gotoEditRole(scope.row.id)">编辑</el-button>
                            <el-button type="warning" size="small" icon="el-icon-view"
                                       @click="deleteRole(scope.row.id)"
                                       v-if="scope.row.fixed === 0">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </table-mixin>


            <!-- 编辑角色 -->
            <el-dialog :title="dialogTitle" :visible.sync="showEditRoleDialog"
                       center width="700px">

                <el-form :model="tmpRole" :rules="rules" :label-position="$store.labelPosition"
                         label-width="30%" ref="role">
                    <el-row>
                        <el-col>
                            <el-form-item label="角色名称：" prop="roleName">
                                <el-input v-model="tmpRole.roleName" ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col>
                            <el-form-item label="详细描述：">
                                <el-input type="textarea" :row="5" v-model="tmpRole.remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="hideEditRoleDialog()">取 消</el-button>
                    <el-button type="primary" @click="validateRole()">确 定</el-button>
                </div>

            </el-dialog>

        </div>
    </div>
</template>

<script>
    export default {
        name: "role",

        data() {
            return {
                searchForm: {
                    roleName: ''
                },

                tableData: {
                    loading: true,
                    body: []
                },
                currentPage: 1,
                paginationTotal: 0,
                //selectedRoles: [],
                isEdit: true,
                roleId: -1,
                dialogTitle: '编辑角色',
                tmpRole: {
                    id: -1,
                    roleName: '',
                    remark: ''
                },
                showEditRoleDialog: false,

                rules:{
                    roleName:[{ required: true, message: '请输入角色名称', trigger: 'blur' }]
                }
            }
        },

        mounted() {
            this.searchRolesByCriteria()
        },

        methods: {
            searchRolesByCriteria(){
                this.currentPage = 1;
                this.searchRole();
            },

            // 获取table数据
            async searchRole() {
                console.log("this.currentPage: ", this.currentPage);
                let res = await this.$axios.post('/aa/role/list', {
                    pageSize: this.$store.state.pageSize,
                    pageNo: this.currentPage,
                    roleName: this.searchForm.roleName
                });

                /*let res = this.$store.dispatch("aa/searchRole", {
                    roleName: this.searchForm.roleName,
                    pageNo: this.currentPage});*/

                console.log("返回角色列表：", res);
                this.tableData.loading = false;
                this.tableData.body = res.rows;
                this.paginationTotal = res.total;
            },

            pageChange(currentPage) {
                this.currentPage = currentPage;
                this.searchRole();
            },

            gotoAddRole(){
                this.dialogTitle = "增加角色";
                //this.tmpRole = {};
                this.tmpRole.id = -1;
                this.tmpRole.roleName = '';
                this.tmpRole.remark = '';
                this.showEditRoleDialog = true;
            },

            async gotoEditRole(roleId) {
                this.dialogTitle = "编辑角色";
                let res = await this.$axios.get(`/aa/role/${roleId}`);
                //console.log("=========", res);
                this.tmpRole = res.result;
                this.showEditRoleDialog = true;
            },

            /*handleSelectionChange(val) {
                console.log("选中的元素: ", val); // val 中是所有选中的元素的值
                this.selectedRoles = val
            },*/

            hideEditRoleDialog(){
                this.showEditRoleDialog = false;
            },

            async deleteRole(id){
                await this.$axios.delete(`/aa/role/${id}`, {});
                this.$myMsg.success('删除成功');
                this.searchRolesByCriteria();
            },

            validateRole(){
                this.$refs['role'].validate((valid) => {
                    console.log("表单验证：", valid);
                    if (valid) {
                        this.saveRole();
                    } else {
                        return false;
                    }
                });
            },

            async saveRole(){
                await this.$axios.post('/aa/role', this.tmpRole);
                this.hideEditRoleDialog();
                this.searchRolesByCriteria();
            }
        }

    }
</script>

